<template>
  <div class="category">
    <!-- 面包屑 -->
    <el-breadcrumb
      separator="/"
      style="line-height:45px;" >
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 添加分类按钮 -->
    <el-button
      type="success"
      plain
      @click="showAddCate"
    >添加角色</el-button>
    <!-- TreeGrid组件  树形展示商品分类 -->
    <tree-grid
      :treeStructure="true"
      :columns="columns"
      :data-source="cateList"
      @deleteCate="deleteCategory"
      @editCate="editCategory"
    >
    </tree-grid>

    <!-- 添加分类弹框 -->
    <el-dialog
      title="添加角色"
      :visible.sync="adddialogFormVisible" >
      <el-form
        :model="addform"
        label-width="80px"
      >
        <el-form-item label="分类名称">
          <el-input
            v-model="addform.cat_name"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="父级分类">
          <el-cascader
            :options="cateListAdd"
            v-model="selectedOptions"
            @change="handleChange"
            :props='cateprops'
            change-on-select
          >
          </el-cascader>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="adddialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="addCateSubmit"
        >确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagenum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

  </div>
</template>
<script>
import { getCategoriesList, addCategories, deleteCategories } from '@/api'
import TreeGrid from '@/components/TreeGrid/TreeGrid.vue'
export default {
  // 组件注入
  components: {
    TreeGrid: TreeGrid
  },
  data () {
    return {
      // 列的属性
      columns: [
        {
          text: '分类名称',
          dataIndex: 'cat_name',
          width: ''
        },
        {
          text: '是否有效',
          dataIndex: 'cat_deleted',
          width: ''
        },
        {
          text: '分类级别',
          dataIndex: 'cat_level',
          width: ''
        }
      ],
      // 事件源
      cateList: [],
      cateListAdd: [],
      // 控制添加分类弹框的显示和隐藏
      adddialogFormVisible: false,
      // 要添加分类信息
      addform: {
        cat_name: '',
        cat_pid: 0,
        cat_level: 0
      },
      selectedOptions: [],
      cateprops: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      },
      // 分页
      pagenum: 1,
      pagesize: 10,
      total: 0
    }
  },
  methods: {
    // 分类数据动态展示
    init () {
      getCategoriesList({type: 3, pagenum: this.pagenum, pagesize: this.pagesize}).then(res => {
        // console.log(res)
        if (res.meta.status === 200) {
          this.cateList = res.data
          // 当前数据条数
          this.total = res.data.length
        }
      })
    },
    // 删除商品分类
    deleteCategory (id) {
      // console.log(id)
      deleteCategories(id)
        .then(res => {
          console.log(res)
          if (res.meta.status === 200) {
            this.$message({
              message: res.meta.msg,
              type: 'success'
            })
            // 重新渲染数据
            this.init()
          } else {
            this.$message({
              message: res.meta.msg,
              type: 'error'
            })
          }
        })
    },
    // 编辑商品分类
    editCategory (row) {
      console.log(row)
    },
    // 级联选择器触发
    handleChange (value) {
      // console.log(value)
      // 判断分类选择的层级
      if (value.length === 1) {
        this.addform.cat_level = 1
        this.addform.cat_pid = value[0]
      } else if (value.length === 2) {
        this.addform.cat_level = 2
        this.addform.cat_pid = value[1]
      }
    },
    // 添加分类按钮弹框
    showAddCate () {
      this.adddialogFormVisible = true
      getCategoriesList({type: 2}).then(res => {
        if (res.meta.status === 200) {
          this.cateListAdd = res.data
        }
      })
    },
    // 实现添加角色的提交功能
    addCateSubmit () {
      // console.log(this.addform)
      // 调用接口，实现数据添加
      addCategories(this.addform)
        .then(res => {
          console.log(res)
          if (res.meta.status === 201) {
            // 隐藏添加分类对话框
            this.adddialogFormVisible = false
            // 给出提示
            this.$message.success('数据添加成功')
            this.init()
          } else {
            this.$message.error('数据添加失败')
          }
        })
    },
    //  分页
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.pagesize = val
      this.init()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.pagenum = val
      this.init()
    }

  },
  mounted () {
    this.init()
  }
}
</script>
<style lang="scss" scoped>
</style>
